<template>
  <div class="box">
    <h1>About</h1>
    <div>
      <el-button type="primary" @click="addCounter">Test</el-button>
    </div>
    <div>{{ store.count }} : {{ count }}</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore();

let { count }  = storeToRefs(store);
let age = ref(66);
let counter = reactive({
  name: 'demo'
});

onMounted(() => {
  console.log('onMounted')
})

function addCounter() {
  store.increment();
  console.log('addCounter', store.count);
  console.log('age', age.value);
  console.log('counter', counter.name);
}

</script>

<style scoped>

</style>